<template>
	<view class="">
		<view class="plr15">
			<view class="bgcolor cl-w pd15">
				<view>
					<view class="cl-notice">销货金额</view>
					<view class="ft22">10012.00</view>
				</view>
				<view class="flex spaceb mt10">
					<view>
						<view class="cl-notice">购货金额</view>
						<view class="">10012.00</view>
					</view>
					<view>
						<view class="cl-notice">资金收入</view>
						<view class="">10012.00</view>
					</view>
					<view>
						<view class="cl-notice">资金支出</view>
						<view class="">10012.00</view>
					</view>
				</view>
			</view>
			<view class="bg-w br30 mt15">
				<view class="flex plt15 alcenter spaceb">
					<view class="title_txt ftw700 ft16">数据概览</view>
					<!-- <view class="flex alcenter mr15" @click="showtime=true">
						<view class="cl-hui ft12 mr5">{{time}}</view>
						<image src="../../static/jiantou_xia_h.png" mode="widthFix" style="width: 20rpx;"></image>
					</view> -->
				</view>
				<view class="pd15 charts-box" style="padding-top: 0;">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			<view class="bg-w br30 mt15">
				<view class="flex spaceb alcenter plt15">
					<view class=" title_txt ftw700 ft16">总资产</view>
					<view class="flex alcenter mr15">
						<view class="cl-hui ft12 mr5">资产数据</view>
					</view>
				</view>
				<view class="plr15">
					<view class="bd-bottom bd-top plt15 ">
						<view>465134964.1567</view>
					</view>
					<view class="plt15">
						<view class="flex spaceb cl-hui">
							<view>资金金额</view>
							<view>4987456.12</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>库存成本</view>
							<view>15997.15</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>应收欠款</view>
							<view>-62176217.12</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>应付欠款</view>
							<view>-176217.12</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-w br30 mt15">
				<view class="flex plt15 alcenter spaceb">
					<view class="title_txt ftw700 ft16">资金数据</view>
					<!-- <view class="flex alcenter mr15" @click="showtime=true">
						<view class="cl-hui ft12 mr5">{{time}}</view>
						<image src="../../static/jiantou_xia_h.png" mode="widthFix" style="width: 20rpx;"></image>
					</view> -->
				</view>
				<view class="pd15 charts-box" style="padding-top: 0;">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
				</view>
			</view>
			<view class="bg-w br30 mt15">
				<view class="flex spaceb alcenter plt15">
					<view class=" title_txt ftw700 ft16">数据合计</view>
				</view>
				<view class="plr15">
					<view class="plt15" style="padding-top: 0;">
						<view class="flex spaceb cl-hui">
							<view>商品数量：</view>
							<view>49</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>客户数量：</view>
							<view>159</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>供应商数量：</view>
							<view>762</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>库存数量：</view>
							<view>176217</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>库存预警：</view>
							<view>7</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>保质期预警：</view>
							<view>17</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>用户数量：</view>
							<view>76217</view>
						</view>
						<view class="flex spaceb cl-hui mt10">
							<view>人员数量：</view>
							<view>621</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-w br30 mt15">
				<view class="flex plt15 alcenter spaceb">
					<view class="title_txt ftw700 ft16">库存数据</view>
					<!-- <view class="flex alcenter mr15" @click="showtime=true">
						<view class="cl-hui ft12 mr5">{{time}}</view>
					</view> -->
				</view>
				<view class="pd15 charts-box" style="padding-top: 0;">
					<qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="showtime" :params="params" @confirm="confirm"></u-picker>
		<view style="height: 100rpx;"></view>
		<!-- <custom-tab-bar></custom-tab-bar> -->
	</view>
</template>

<script>
	import customTabBar from '@/components/customTabBar.vue';
	export default {
		components: {
			customTabBar
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(to right, #3247D3, #1178F5)'
				},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {},
					dataLabel: false,
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartData1: {},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				chartData2: {},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showtime: false,
				time: ''
			};
		},
		onReady() {
			this.getServerData();
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var date = new Date()
			var year = date.getFullYear()
			var month = date.getMonth() + 1
			this.time = year + '年' + month + '月'
		},
		onShow() {
			// this.isLogin = checkLogin()
			// if (!this.isLogin) {
			// 	this.isloginBind()
			// 	return false
			// }

		},
		methods: {
			confirm(e) {
				console.log(e)
				this.time = e.year + '年' + e.month + '月'
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12",
							"13", "14", "15", "16", "17", "18"
						],
						series: [{
								name: "购货入库单",
								lineType: "dash",
								data: [35, 8, 25, 37, 4, 20, 35, 8, 25, 37, 4, 20, 35, 8, 25, 37, 4, 20]
							},
							{
								name: "购货退货单",
								data: [70, 40, 65, 100, 44, 68, 35, 8, 25, 37, 4, 20, 35, 8, 25, 37, 4, 20]
							},
							{
								name: "销货出库单",
								data: [100, 80, 95, 15055, 112, 132, 35, 8, 25, 37, 4, 20, 35, 8, 25, 37,
									4, 20
								]
							},
							{
								name: "销货退货单",
								data: [56, 44, 95, 34, 89, 42, 35, 8, 25, 37, 4, 20, 35, 8, 25, 37, 4, 20]
							},
							{
								name: "收款单",
								data: [52, 80, 95, 54, 15, 56, 35, 8, 25, 37, 4, 20, 35, 8, 25, 37, 4, 20]
							},
							{
								name: "付款单",
								data: [67, 45, 95, 33, 112, 43, 35, 8, 25, 37, 4, 20, 35, 8, 25, 37, 4, 20]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					let res1 = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
							name: "目标值",
							data: [35, 36, 31, 33, 13, 34]
						}, ]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res1));
					let res2 = {
						series: [{
							data: [{
								"name": "仓库1",
								"value": 5000
							}, {
								"name": "仓库3",
								"value": 30
							}, {
								"name": "仓库2",
								"value": 20
							}, {
								"name": "仓库4",
								"value": 18
							}, {
								"name": "仓库5",
								"value": 8
							}]
						}]
					};
					this.chartData2 = JSON.parse(JSON.stringify(res2));
				}, 500);
			},
			isloginBind() {
				uni.showModal({
					title: '温馨提示',
					content: '此时此刻需要您登录喔~',
					confirmText: "去登录",
					cancelText: "再逛会",
					success: res => {
						if (res.confirm) {
							//#ifdef APP-PLUS||H5
							uni.navigateTo({
								url: "/pages/login/index"
							})
							//#endif
							//#ifdef MP-WEIXIN
							console.log(11)
							uni.navigateTo({
								url: "/pages/login/wxLogin"
							})
							//#endif
						}
					}
				})
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.bgcolor {
		background: linear-gradient(to right, #3247D3, #1178F5);
		width: 100%;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.item-box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.lines {
		width: 50%;
		height: 20rpx;
		background-color: #3247D3;
	}

	.bg01 {
		background-color: #CFCFCF;
	}

	.title_txt::before {
		content: '';
		border-left: #3247D3 solid 4px;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.btns {
		border-radius: 60rpx;
		color: #fff;
		padding: 8rpx 20rpx;
		background: linear-gradient(to right, #3247D3, #1178F5);
	}

	.shuju_item {
		width: 31%;
		padding: 0 20rpx;
		background-color: #FEEFF1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 20rpx;
		margin-top: 30rpx;
	}

	.shuju_item:nth-child(3n) {
		margin-right: 0;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>